<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      label-width="70px"
      label-position="left"
    >
      <el-form-item label="所属渠道" prop="deptId">
        <el-select
          v-model="queryParams.deptId"
          filterable
          placeholder="请选择渠道"
          style="width: 200px"
        >
          <el-option
            v-for="item in options"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入产品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="负责人" prop="deptLeader">
        <el-input
          v-model="queryParams.deptLeader"
          placeholder="请输入负责人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择产品状态">
          <el-option label="上架" :value="1" />
          <el-option label="下架" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="投放城市" prop="cityId">
        <el-input
          v-model="queryParams.city"
          placeholder="请输入投放城市"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="endTime">
        <div class="r_flex">
          <el-date-picker
            v-model="queryParams.alltime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            @change="changtime"
          />
        </div>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['business:product:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table
      v-loading="loading"
      :header-cell-style="{
        background: $store.state.app.theme.tableBack,
        color: $store.state.app.theme.tableColor,
      }"
      :data="productList"
      stripe
      border
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="产品编号"
        fixed="left"
        width="130px"
        align="center"
        prop="productId"
      />
      <el-table-column
        label="产品名称"
        fixed="left"
        width="130px"
        align="center"
        prop="name"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="产品logo" align="center">
        <template slot-scope="scope">
          <div style="width: 40px; margin: 0 auto">
            <img :src="scope.row.logo" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="渠道名称"
        align="center"
        width="130px"
        prop="deptName"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="派单状态"
        sortable
        width="130px"
        align="center"
        prop="pdStatus"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tooltip
            v-if="scope.row.pdStatus"
            class="item"
            effect="dark"
            content="正常状态"
            placement="right"
          >
            <el-tag type="success" size="small">开启</el-tag>
          </el-tooltip>
          <el-tooltip
            v-else
            class="item"
            effect="dark"
            :content="scope.row.pdMsg"
            placement="right"
          >
            <el-tag type="danger" size="small">关闭</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="投放城市"
        align="center"
        prop="city"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div class="r_text" style="text-align: left">
            {{ scope.row.city }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="产品状态"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#bebdbf"
            @change="statusUpList(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="产品单价"
        sortable
        width="130px"
        align="center"
        prop="price"
      />
      <el-table-column
        label="日投放量"
        sortable
        width="130px"
        align="center"
        prop="todayNum"
      />
      <el-table-column
        label="日剩余投放量"
        sortable
        width="130px"
        align="center"
        prop="remainNum"
      />
      <el-table-column
        label="贷款期限(月)"
        sortable
        width="130px"
        align="center"
        prop="lowLoanTerm"
      />
      <el-table-column
        label="最低额度(万)"
        width="120px;"
        align="center"
        prop="lowAmount"
      />
      <el-table-column
        label="最高额度(万)"
        width="120px;"
        align="center"
        prop="highAmount"
      />
      <el-table-column
        label="月利率"
        sortable
        align="center"
        width="100px;"
        prop="rate"
      >
        <template slot-scope="scope"> {{ scope.row.rate }}% </template>
      </el-table-column>

      <el-table-column
        label="上架时间"
        sortable
        align="center"
        width="120px;"
        prop="startTime"
      />
      <el-table-column
        label="下架时间"
        sortable
        align="center"
        width="120px;"
        prop="endTime"
      />
      <el-table-column
        label="创建时间"
        sortable
        align="center"
        width="160px;"
        prop="createTime"
      />

      <el-table-column
        v-if="checkPermi(['business:product:edit', 'business:product:remove'])"
        width="160px"
        label="操作"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['business:product:edit']"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="text" @click="shieldingUp(scope.row)"
            >屏蔽渠道</el-button
          >
          <el-button
            v-hasPermi="['business:product:remove']"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改产品对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="所属渠道" prop="deptId">
          <el-select
            v-model="form.deptId"
            filterable
            placeholder="请选择渠道"
            style="width: 200px"
          >
            <el-option
              v-for="item in options"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input
            v-model="form.name"
            style="width: 80%"
            placeholder="请输入产品名称"
          />
        </el-form-item>
        <el-form-item label="产品logo" prop="logo">
          <el-input
            v-model="form.logo"
            placeholder="请上传logo"
            style="width: 80%"
          >
            <template slot="append"
              ><el-button slot="append">点击上传</el-button></template
            >
          </el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="price">
          <el-input
            v-model="form.price"
            style="width: 80%"
            placeholder="请输入产品单价"
          />
        </el-form-item>
        <el-form-item label="产品标签" prop="tag">
          <el-input
            v-model="form.tag"
            style="width: 80%"
            placeholder="请输入产品标签"
          />
        </el-form-item>
        <el-form-item label="机构信息" prop="info">
          <el-input
            v-model="form.info"
            style="width: 80%"
            placeholder="请输入机构信息"
          />
        </el-form-item>
        <el-form-item label="贷款额度(万)" required>
          <el-col :span="10">
            <el-form-item prop="lowAmount">
              <el-input
                v-model="form.lowAmount"
                placeholder="最低贷款额度 (万元)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center">-</el-col>
          <el-col :span="10">
            <el-form-item prop="highAmount">
              <el-input
                v-model="form.highAmount"
                placeholder="最高贷款额度 (万元)"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 资质筛选对话跨国 -->
    <el-dialog
      title="投放配置"
      :visible.sync="openzz"
      width="750px"
      append-to-body
    >
      <el-form
        ref="tf_form"
        :model="tf_form"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item label="日投放量" prop="todayNum">
          <el-input
            v-model="tf_form.todayNum"
            style="width: 80%"
            placeholder="请输入日投放量"
          />
        </el-form-item>
        <el-form-item label="投放城市" prop="city">
          <el-input
            v-model="tf_form.city"
            style="width: 80%"
            placeholder="请选择投放城市"
            disabled
          />
        </el-form-item>
        <el-form-item label="请选择省份">
          <el-select
            v-model="citySHengstr"
            filterable
            placeholder="请选择省份"
            style="width: 200px"
            @change="getCityS"
          >
            <el-option
              v-for="item in citySHeng"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="请选择城市">
          <div v-if="citySHengstr != ''">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <div style="margin: 15px 0" />
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :key="city" :label="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-else style="color: #ccc">请优先选择省份</div>
        </el-form-item>
        <el-form-item label="投放星期 " prop="openWeek">
          <el-checkbox-group v-model="tf_form.openWeek">
            <el-checkbox label="1">星期一</el-checkbox>
            <el-checkbox label="2">星期二</el-checkbox>
            <el-checkbox label="3">星期三</el-checkbox>
            <el-checkbox label="4">星期四</el-checkbox>
            <el-checkbox label="5">星期五</el-checkbox>
            <el-checkbox label="6">星期六</el-checkbox>
            <el-checkbox label="0">星期天</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="投放时间" prop="startTime">
          <el-col :span="8">
            <el-form-item prop="startTime">
              <!-- <el-date-picker clearable size="small"
                v-model="tf_form.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开启时间" style="width: 100%;">
              </el-date-picker> -->
              <el-time-picker
                v-model="tf_form.startTime"
                size="small"
                value-format="HH:mm:ss"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59',
                }"
                placeholder="选择开启时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center">-</el-col>
          <el-col :span="8">
            <el-form-item prop="endTime">
              <el-time-picker
                v-model="tf_form.endTime"
                size="small"
                value-format="HH:mm:ss"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59',
                }"
                placeholder="选择结束时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄限制" required>
          <el-col :span="8">
            <el-form-item prop="lowAge">
              <el-input v-model="tf_form.lowAge" placeholder="最低年龄" />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center">-</el-col>
          <el-col :span="8">
            <el-form-item prop="highAge">
              <el-input v-model="tf_form.highAge" placeholder="最高年龄" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="芝麻分 " prop="zhimaCredit">
          <el-checkbox-group v-model="tf_form.zhimaCredit">
            <el-checkbox label="1">600分以下</el-checkbox>
            <el-checkbox label="2">600-650分</el-checkbox>
            <el-checkbox label="3">650-700分</el-checkbox>
            <el-checkbox label="4">700分以上</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="资质需求" prop="zizhiNeed">
          <el-checkbox-group v-model="tf_form.zizhiNeed">
            <el-checkbox label="1">有社保</el-checkbox>
            <el-checkbox label="2">有公积金</el-checkbox>
            <el-checkbox label="3">有保险保单</el-checkbox>
            <el-checkbox label="4">有车</el-checkbox>
            <el-checkbox label="5">有房</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="条件关系" prop="allMeet">
          <el-radio-group v-model="tf_form.allMeet">
            <el-radio :label="0">选中满足一项即可</el-radio>
            <el-radio :label="1">选中都需要</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitFormZZ"
          >确 定</el-button
        >
        <el-button @click="cancelQualification">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 屏蔽渠道配置 -->
    <el-dialog
      title="屏蔽渠道配置"
      :visible.sync="shieldingOpen"
      width="750px"
      append-to-body
    >
      <!-- 屏蔽极速贷列表 -->
      <h3 style="margin-bottom: 20px">屏蔽乙方渠道列表</h3>
      <div class="shieldingcenter">
        <!-- 表格数据 -->
        <div class="shieldingTable scrollBorder" v-loading="shielding_loading">
          <div
            class="sheling_list"
            v-for="(shieldingData, keyName) in channelData"
            :key="keyName"
          >
            <!-- 屏蔽大额贷列表 -->
            <div class="sheling_title">
              <div>
                <div
                  class="checkbox_border r_flex_wrap"
                  style="cursor: pointer"
                >
                  <div
                    class="checkbox_list r_text_none"
                    @click="allshieChange(shieldingData)"
                  >
                    <div
                      class="checkbox_icon r_flex_center"
                      :class="shieldingData.active ? 'active_icon' : ''"
                    >
                      <i class="el-icon-check" />
                    </div>
                    <span style="font-weight: 700; color: #333;">{{
                      shieldingData.name
                    }}</span>
                  </div>
                </div>
              </div>

              <div class="r_flex son_border">
                <div
                  v-for="(sonData, index) in shieldingData.content"
                  :key="index"
                >
                  <div class="checkbox_border r_flex_wrap">
                    <div
                      class="checkbox_list r_text_none"
                      @click="allcityChange(sonData)"
                    >
                      <div
                        class="checkbox_icon r_flex_center"
                        :class="sonData.delFlag == '2' ? '' : 'active_icon'"
                      >
                        <i class="el-icon-check" />
                      </div>
                      <span style="min-width: 150px;" >{{ sonData.channelName }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          :loading="buttonLoading"
          type="primary"
          @click="submitShielding"
          >确 定</el-button
        >
        <el-button @click="shieldingOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProduct,
  delProduct,
  addProduct,
  updateProduct,
  check,
} from "@/api/product/product";
import {
  channelList,
  addBatch,
  productHideChannel,
} from "@/api/business/system";
import { getChannel, getCity } from "@/api/xxc";
import { checkPermi } from "@/utils/permission"; // 权限判断函数

export default {
  name: "Product",
  data() {
    return {
      shieldingActive: {},
      channelData: [{ name: "全选", active: false, content: [] }],
      shielding_loading: false,
      value: false,
      checkAll: false,
      // 选中的
      checkedCities: [],
      // 所有的城市
      cities: [],
      cityVal: [],
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 渠道
      options: [],
      // 是否显示弹出层
      open: false,
      // 是否显示资质筛选弹出层
      openzz: false,
      // 是否显示屏蔽渠道弹出层
      shieldingOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 负责人
        deptLeader: "",
        params: {
          alltime: "",
          startTime: "",
        },
        endTime: "",
        deptId: undefined,
        deptName: undefined,
        name: undefined,
        logo: undefined,
        todayNum: undefined,
        price: undefined,
        tag: undefined,
        status: "",
        info: undefined,
        cityId: undefined,
        openWeek: [],
        startTime: undefined,
        endTime: undefined,
        lowAmount: undefined,
        highAmount: undefined,
      },
      // 存储所有的省份
      citySHeng: [],
      citySHengstr: "",
      city: [],
      cityData: [],
      // 添加/修改表单参数
      form: {
        // 产品ID
        productId: "",
        // 渠道ID
        deptId: "",
        // 产品名称
        name: "",
        // 产品logo
        logo: "",
        // 产品单价
        price: "",
        // 产品标签
        tag: "",
        // 产品机构信息
        info: "",
        // 最低额度
        lowAmount: "",
        // 最高额度
        highAmount: "",
      },
      tf_form: {
        // 产品ID
        productId: "",
        // 今日投放量
        todayNum: "",
        city: "",
        // 投放城市
        cityId: "",
        // 开启星期
        openWeek: [],
        // 开启时间
        startTime: "",
        // 结束时间
        endTime: "",
        // 最低年龄
        lowAge: "",
        // 最高年龄
        highAge: "",
        // 芝麻分
        zhimaCredit: [],
        // 资质需求
        zizhiNeed: [],
        // 条件关系
        allMeet: "0",
      },
      // 屏蔽渠道配置
      shielding_form: {
        value1: [],
      },
      // 表单校验
      rules: {
        productId: [{ required: true, message: "不能为空", trigger: "blur" }],
        deptId: [
          { required: true, message: "所属渠道不能为空", trigger: "blur" },
          { pattern: /^[0-9]+$/, message: "所属渠道参数不合法" },
        ],
        name: [
          { required: true, message: "产品名称不能为空", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{2,16}$/,
            message: "产品名称由2-16位数字或字母、汉字、中/下划线组成！",
          },
        ],
        logo: [{ required: true, message: "logo不能为空", trigger: "blur" }],
        todayNum: [
          { required: true, message: "日投放量不能为空", trigger: "blur" },
          { pattern: /^[0-9]{1,10}$/, message: "日投放量由1-10位数字组成！" },
        ],
        price: [
          { required: true, message: "产品单价不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]+(.[0-9]{2})?$/,
            message: "产品单价只支持数字，小数点后两位！",
          },
        ],
        tag: [
          { required: true, message: "产品标签不能为空", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{1,50}$/,
            message: "产品标签由1-50位数字或字母、汉字、中/下划线组成！",
          },
        ],
        info: [
          { required: true, message: "机构信息不能为空", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{1,100}$/,
            message: "机构信息由1-100位数字或字母、汉字、中/下划线组成！",
          },
        ],
        city: [
          { required: true, message: "投放城市不能为空", trigger: "blur" },
        ],
        openWeek: [
          { required: true, message: "投放星期不能为空", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "开启时间不能为空", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" },
        ],
        lowAge: [
          { required: true, message: "最低年龄不能为空", trigger: "blur" },
          { pattern: /^[0-9]{1,3}$/, message: "最低年龄由1-3位数字组成！" },
        ],
        highAge: [
          { required: true, message: "最高年龄不能为空", trigger: "blur" },
          { pattern: /^[0-9]{1,3}$/, message: "最高年龄由1-3位数字组成！" },
        ],
        lowAmount: [
          { required: true, message: "最低贷款额度不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]{1,10}$/,
            message: "最低贷款额度由1-10位数字组成！",
          },
        ],
        highAmount: [
          { required: true, message: "最高贷款额度不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]{1,10}$/,
            message: "最高贷款额度由1-10位数字组成！",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getChannelFun();
    this.getCityFun();
  },
  methods: {
    checkPermi,
    shieldingUp(data) {
      this.shieldingOpen = true;
      this.shieldingActive = data;
      productHideChannel({
        productId: data.productId,
        productName: data.productName,
      }).then((response) => {
        console.log(response, "response");
        this.channelData[0].content = response.data;
        console.log(this.channelData, "channelData");
        this.shielding_loading = false;
      });
    },
    allshieChange(data) {
      console.log(data.active);
      data.active = !data.active;
      if (data.active) {
        data.content.map((res) => {
          res.delFlag = 0;
          res.changeKey = true;
        });
      } else {
        data.content.map((res) => {
          res.delFlag = 2;
          res.changeKey = true;
        });
      }

      this.$forceUpdate();
    },
    allcityChange(data) {
      data.delFlag = data.delFlag == 2 ? 0 : 2;
      data.changeKey = true;
      this.$forceUpdate();
    },
    // 渠道配置
    submitShielding() {
      const parm = [];
      for (const key in this.channelData) {
        const data = this.channelData[key];
        console.log(data, "data");
        data.content.map((son) => {
          if (son.changeKey) {
            parm.push({
              type: 1,
              id: son.id, // 乙方渠道id
              channelId: son.channelId, // 乙方渠道id
              channelName: son.channelName, // 乙方渠道名称
              deptId: son.deptId, // 甲方渠道id
              deptName: son.deptName, // 甲方渠道名称
              productId: son.productId, // 大额贷产品id
              productName: son.productName, // 大额贷名称
              delFlag: son.delFlag == 0 ? "0" : "2", // 删除标志（0代表存在 2代表删除）
            });
          }
        });
      }
      const newparm = JSON.stringify(parm);

      addBatch(newparm).then((res) => {
        this.$modal.msgSuccess("修改屏蔽渠道成功");
        this.buttonLoading = false;
        this.shieldingOpen = false;
      });
    },
    // 时间选择
    changtime(newtime) {
      this.queryParams.params.startTime = newtime ? newtime[0] : "";
      this.queryParams.params.endTime = newtime ? newtime[1] : "";
    },
    // 排序类别 descending
    sortChange(data, value) {
      this.queryParams.isAsc = data.order === "descending" ? "asc" : "desc";
      this.queryParams.orderByColumn = data.prop;
      this.getList();
    },
    // 城市全选
    handleCheckAllChange(val) {
      // console.log(val)
      this.checkedCities = val ? this.cities : [];
      if (val) {
        for (let index = 0; index < this.cities.length; index++) {
          if (this.cityVal.indexOf(this.cities[index]) === "-1") {
            this.cityVal.push(this.cities[index]);
          }
        }
      } else {
        for (let index = 0; index < this.cities.length; index++) {
          if (this.cityVal.indexOf(this.cities[index]) !== "-1") {
            this.cityVal.splice(this.cityVal.indexOf(this.cities[index]), 1);
          }
        }
      }
      this.tf_form.city = this.cityVal.toString();
      // console.log(this.cityVal)
    },
    // 城市单选
    handleCheckedCitiesChange(value) {
      // console.log(value)
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      // 循环当前选中的城市
      for (let index = 0; index < value.length; index++) {
        if (this.cityVal.indexOf(value[index]) === "-1") {
          this.cityVal.push(value[index]);
        }
      }
      // 循环已经存在的城市，删除取消的城市
      for (let index = 0; index < this.cityVal.length; index++) {
        if (value.indexOf(this.cityVal[index]) === "-1") {
          this.cityVal.splice(this.cityVal.indexOf(this.cityVal[index]), 1);
        }
      }
      // console.log(this.cityVal)
      this.tf_form.city = this.cityVal.toString();
    },
    /** 查询产品列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams)
        .then((response) => {
          // 单价做除法
          // for (let index = 0; index < response.rows.length; index++) {
          //   response.rows[index].price = response.rows[index].price / 100
          // }
          this.productList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取所有渠道
    getChannelFun() {
      getChannel().then((response) => {
        this.options = response.data;
      });
    },
    // 获取城市方法
    getCityFun() {
      getCity().then((response) => {
        this.cityData = response.rows;
        for (let index = 0; index < response.rows.length; index++) {
          // indexOf 返回-1表示不存在
          if (this.citySHeng.indexOf(response.rows[index].cprovince) === "-1") {
            // 获取所有的省
            this.citySHeng.push(response.rows[index].cprovince);
          }
        }
      });
    },
    // 获取市
    getCityS() {
      this.cities = [];
      var pdnum = 0;
      for (let index = 0; index < this.cityData.length; index++) {
        if (this.cityData[index].cprovince === this.citySHengstr) {
          this.cities.push(this.cityData[index].cname);
          if (this.cityVal.indexOf(this.cityData[index].cname) !== "-1") {
            pdnum++;
          }
        }
      }
      // 判断全选状态
      if (pdnum === this.cities.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
      this.checkedCities = this.cityVal ? this.cityVal : [];
    },
    // 修改产品状态
    statusUpList(row) {
      var param = {
        // 产品ID
        productId: row.productId,
        // 产品状态
        status: row.status,
      };
      check(param)
        .then((response) => {
          if (response.code === 200) {
            this.$modal.msgSuccess("修改成功");
            this.getList();
          }
        })
        .finally(() => {
          this.getList();
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancelQualification() {
      this.openzz = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        productId: undefined,
        deptId: undefined,
        name: undefined,
        logo: undefined,
        price: undefined,
        tag: undefined,
        info: undefined,
        lowAmount: undefined,
        highAmount: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.productId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push("productApplysAdd");

      // this.reset()
      // this.open = true
      // this.title = '添加产品'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push({
        path: "/product/productApplysAdd",
        query: { productId: row.productId },
      });

      // this.title = '修改产品'
      // this.form.productId = row.productId
      // this.form.deptId = row.deptId
      // this.form.name = row.name
      // this.form.logo = row.logo
      // this.form.price = row.price
      // this.form.tag = row.tag
      // this.form.info = row.info
      // this.form.lowAmount = row.lowAmount
      // this.form.highAmount = row.highAmount
      // this.open = true
    },
    handleZZ(row) {
      // 编辑展示赋值
      this.tf_form.productId = row.productId;
      this.tf_form.todayNum = row.todayNum;
      this.tf_form.startTime = row.startTime;
      this.tf_form.endTime = row.endTime;
      this.tf_form.lowAge = row.lowAge;
      this.tf_form.highAge = row.highAge;
      this.tf_form.allMeet = row.allMeet;

      // 将芝麻分转为数组
      if (row.zhimaCredit) {
        this.tf_form.zhimaCredit = row.zhimaCredit.split(",");
      } else {
        this.tf_form.zhimaCredit = [];
      }
      // 将开启星期转为数组
      if (row.openWeek) {
        this.tf_form.openWeek = row.openWeek.split(",");
      } else {
        this.tf_form.openWeek = [];
      }

      var zizhiNeed = [];
      // fund 社保
      if (row.fund === "1") {
        zizhiNeed.push("1");
      }
      // has 公积金
      if (row.has === "1") {
        zizhiNeed.push("2");
      }
      // bdStatus 保险保单
      if (row.bdStatus === "1") {
        zizhiNeed.push("3");
      }
      // carProperty 车产
      if (row.carProperty === "1") {
        zizhiNeed.push("4");
      }
      // houseProperty 房产
      if (row.houseProperty === "1") {
        zizhiNeed.push("5");
      }

      if (zizhiNeed.length !== 0) {
        this.tf_form.zizhiNeed = zizhiNeed;
      } else {
        this.tf_form.zizhiNeed = [];
      }

      // 申明该产品已经配置得城市参数赋值，并且转为数组
      if (row.cityId) {
        var cityId = row.cityId.split(",");
      } else {
        // var cityId = []
      }

      // 获取第一个省名字,用于打开对话框时得展示
      var citySHengstr = "";
      // 获取第一个省下面所有得城市,用于打开对话框时得展示
      var citys = [];
      // 用于判断是否展示全选状态
      var pdnum = 0;
      // 获取展示的城市
      for (let index = 0; index < this.cityData.length; index++) {
        // 通过判断城市是否已经做过配置，判断城市code是否在产品配置中存在
        if (cityId.indexOf(this.cityData[index].ccode) !== "-1") {
          pdnum++;
          if (!citySHengstr) {
            citySHengstr = this.cityData[index].cprovince;
          }
        }
      }
      // 获取省下面所有得城市
      for (let index = 0; index < this.cityData.length; index++) {
        if (this.cityData[index].cprovince === citySHengstr) {
          citys.push(this.cityData[index].cname);
        }
      }
      // 如果相等则表示该省份为全选状态
      if (pdnum === citys.length) {
        this.checkAll = true;
      }
      if (!row.city) {
        this.cityVal = [];
      } else {
        // 当前产品投放城市
        this.cityVal = row.city.split(",");
      }

      // console.log(this.cityVal)
      // 当前产品投放城市
      this.tf_form.city = row.city;
      // 省份
      this.citySHengstr = citySHengstr;
      // 当前产品投放城市
      if (!row.city) {
        this.checkedCities = [];
      } else {
        // 当前产品投放城市
        this.checkedCities = row.city.split(",");
      }

      this.cities = citys;
      this.openzz = true;
    },
    submitFormZZ() {
      this.$refs["tf_form"].validate((valid) => {
        if (valid) {
          var cityId = [];
          for (let index = 0; index < this.cityData.length; index++) {
            if (this.cityVal.indexOf(this.cityData[index].cname) !== "-1") {
              cityId.push(this.cityData[index].ccode);
            }
          }
          this.buttonLoading = true;

          var param = {
            // 产品ID
            productId: this.tf_form.productId,
            // 今日投放量
            todayNum: this.tf_form.todayNum,
            // 投放城市
            cityId: cityId.toString(),
            // 开启星期
            openWeek: this.tf_form.openWeek.toString(),
            // 开启时间
            startTime: this.tf_form.startTime,
            // 结束时间
            endTime: this.tf_form.endTime,
            // 最低年龄
            lowAge: this.tf_form.lowAge,
            // 最高年龄
            highAge: this.tf_form.highAge,
            // 芝麻分
            zhimaCredit:
              this.tf_form.zhimaCredit.length > 0
                ? this.tf_form.zhimaCredit.toString()
                : null,
            // 资质需求
            // zizhiNeed: [],
            // 条件关系
            allMeet: this.tf_form.allMeet,
          };

          console.log(this.tf_form.zizhiNeed);

          if (this.tf_form.zizhiNeed.length) {
            // fund 社保
            if (this.tf_form.zizhiNeed.indexOf("1") !== "-1") {
              param.fund = 1;
            } else {
              param.fund = 0;
            }
            // has 公积金
            if (this.tf_form.zizhiNeed.indexOf("2") !== "-1") {
              param.has = 1;
            } else {
              param.has = 0;
            }
            // bdStatus 保险保单
            if (this.tf_form.zizhiNeed.indexOf("3") !== "-1") {
              param.bdStatus = 1;
            } else {
              param.bdStatus = 0;
            }
            // carProperty 车产
            if (this.tf_form.zizhiNeed.indexOf("4") !== "-1") {
              param.carProperty = 1;
            } else {
              param.carProperty = 0;
            }
            // houseProperty 房产
            if (this.tf_form.zizhiNeed.indexOf("5") !== "-1") {
              param.houseProperty = 1;
            } else {
              param.houseProperty = 0;
            }
          } else {
            // fund 社保
            param.fund = 0;
            // has 公积金
            param.has = 0;
            // bdStatus 保险保单
            param.bdStatus = 0;
            // carProperty 车产
            param.carProperty = 0;
            // houseProperty 房产
            param.houseProperty = 0;
          }

          updateProduct(param)
            .then((response) => {
              if (response.code === 200) {
                this.$modal.msgSuccess("修改成功");
                this.openzz = false;
                this.getList();
              }
            })
            .finally(() => {
              this.buttonLoading = false;
            });
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.productId != null) {
            this.form.price = this.form.price * 100;
            updateProduct(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            this.form.price = this.form.price * 100;
            addProduct(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids;
      this.$modal
        .confirm('是否确认删除产品编号为"' + productIds + '"的数据项？')
        .then(() => {
          this.loading = true;
          return delProduct(productIds);
        })
        .then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 导出按钮操作 */
    // handleExport() {
    //   this.download('product/product/export', {
    //     ...this.queryParams
    //   }, `product_${new Date().getTime()}.xlsx`)
    // }
  },
};
</script>

<style scoped>
.son_border {
  flex-wrap: wrap;
  display: flex;
  align-content: flex-start;
  margin-right: 60px;
  padding: 0 20px;
}
</style>

